前幾天分別介紹了 memo、useCallback、useMemo 的用法，今天就來好好複習，並且好好的比較這三個的不同之處吧！

memo

首先我們就先從 memo，開始吧

讓我們回想 memo 會使用的時機是什麼？
就是當我的父層改變狀態 (state) 時，會呼叫 React 來重新渲染，正常的過程會連同他的所以子層一起渲染
但是若是子層不需要渲染時，我們會在子層的 component 加上 memo

// 子層的 component
import { memo } from "react"

//情況 1
const Child = memo(() =>{
  return ()                
})
export { Child }
//情況 2
const Child = () =>{
  return ()                
}
const MemoChild = memo(Child)
export { MemoChild }

這兩項都可以！！

這樣只要在從父層傳下來的 props 不改變的情況下就不會 re-render

但是除了以下狀況例外
傳下來的 props 如果是 Object、Array、function 這些類型的東西，因為 React.memo 是用 shallow compare 的方式去比對的，所以子層還是會 re-render

這是 shallowCompare 官方給出的定義

shallowCompare performs a shallow equality check on the current props and nextProps objects as well as the current state and nextState objects.
It does this by iterating on the keys of the objects being compared and returning true when the values of a key in each object are not strictly equal.

簡單來說他會去比對 現在的 props 物件 & state 物件 和 下一次的 props 物件 & state 物件 是否有不同，來決定是否要重新渲染畫面

所以這時就出現了 useCallback 以及 useMemo 這兩 Hook 都是要解決無謂的重複渲染！

useCallback vs useMemo

這兩個 Hook，基本上都是用在父層的 Component

先想想一個狀況，我的父層組件可以會因為有個變數的狀態改變而重新渲染，
但是我其他的值，卻都還是一樣的狀態，會什麼還要跟這渲染，這時這兩個 Hook 出場的時機就來了，他們兩個都可以 記住記憶體的位址，而 useCallback 可以記住某個 function，而 useMemo 通常我們會讓他記住一個大量運算所得到的結果，但是useMemo也可以記住function，所以用下面兩句話總結

• useCallback 只能回傳 function
• useMemo 可以回傳任何型別，但是我們通常讓他回傳一個值

所以其實下面這兩句是一樣的

useCallback(function, [dependencyArray])
useMemo( ( ) =>function, [dependencyArray])

我們來看看這兩個的些微不同之處

  const [count, setCount] = useState(0)

  const reduceUseCallback = useCallback(() => {
    return [count, count + 1, count + 2]
  },[count])

  console.log(reduceUseCallback);

  const reduceUseMemo = useMemo(() => {
    return [count, count + 1, count + 2]
  },[count])

  console.log(reduceUseMemo);

我們可以看到，我們將兩個印出來，會看到是用 useCallback 是回傳一個function，而 useMemo 是回傳一個值

但是我們也可以去執行 reduceUseCallback 這個使用 useCallback 的 function

console.log(reduceUseCallback())

會變成這樣

所以其實這兩個 Hook 蠻大同小異的！

小結

其實對memo、useCallback、useMemo，了解了一點之後就會開始想，竟然這些工具那麼強可以優化效能、減少無謂的渲染次數，那我們每個元件都使用好了，明天就讓我們來聊聊這點